var echarts = require('echarts')
let roadLightData = require('@/assets/json/roadLight.json');
let computerData = require('@/assets/json/computer.json');
let airConditionData = require('@/assets/json/airCondition.json');
let spemData = require('@/assets/json/spem.json');
let chinaJson = require('@/assets/json/china.json');

function roadLightInit() {
  let wCount = 0;
  let eCount = 0;
  let nCount = 0;
  let wOpenCount = 0;
  let wCloseCount = 0;
  let wUnknownCount = 0;
  let nOpenCount = 0;
  let nCloseCount = 0;
  let nUnknownCount = 0;
  let eOpenCount = 0;
  let eCloseCount = 0;
  let eUnknownCount = 0;
  roadLightData.forEach(item => {
    if(item.area.indexOf('西区') != -1){
      wCount++;
      if(item.swtich == 'true'){
        wOpenCount++;
      }else {
        if(item.swtich == 'false'){
          wCloseCount++;
        }else wUnknownCount++;
      }
    }
    if(item.area.indexOf('东区') != -1){
      eCount++;
      if(item.swtich == 'true'){
        eOpenCount++;
      }else {
        if(item.swtich == 'false'){
          eCloseCount++;
        }else eUnknownCount++;
      }
    }
    if(item.area.indexOf('北区') != -1){
      nCount++;
      if(item.swtich == 'true'){
        nOpenCount++;
      }else {
        if(item.swtich == 'false'){
          nCloseCount++;
        }else nUnknownCount++;
      }
    }
    
  })
  let myChart = echarts.init(document.getElementById('line-bar1'));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['开', '关', '未知']
    },
    xAxis: [
      {
        type: 'category',
        data: ['东区', '西区', '北区'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '个数 / 盏',
        min: 0,
        max: 47,
        interval: 10,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '个数 / 盏',
        min: 0,
        max: 5,
        interval: 1,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '开',
        type: 'bar',
        barWidth : 30, //柱图宽度
        data: [
          eOpenCount,wOpenCount,nOpenCount
        ],
        markPoint: {
        	data: [{
        		type: 'max',
        		name: 'Max'
        	},
        	{
        		type: 'min',
        		name: 'Min'
        	}]
        },
        label: {
          show: true,
          rotate: 60 // 旋转角度
        }
      },
      {
        name: '关',
        type: 'bar',
        barWidth : 30, //柱图宽度
        data: [
          eCloseCount,wCloseCount,nCloseCount
        ],
        markPoint: {
        	data: [{
        		type: 'max',
        		name: 'Max'
        	},
        	{
        		type: 'min',
        		name: 'Min'
        	}]
        },
        label: {
          show: true,
          rotate: 60 // 旋转角度
        }
      },
      {
        name: '未知',
        type: 'line',
        yAxisIndex: 1,
        barWidth : 30, //柱图宽度
        data: [
          eUnknownCount,wUnknownCount,nUnknownCount
        ],
        markPoint: {
        	data: [{
        		type: 'max',
        		name: 'Max'
        	},
        	{
        		type: 'min',
        		name: 'Min'
        	}]
        },
        label: {
          show: true,
          rotate: 0 // 旋转角度
        }
      }
    ]
  });
  window.addEventListener("resize", function() { //自动适应大小
  	myChart.resize();
  });
  
  // 1. 实例化对象
  var myChart1 = echarts.init(document.getElementById('pie1'));
  // 2.指定配置
  var ROOT_PATH ='https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
  const engineIcons = {
  	all: ROOT_PATH + '/data/asset/img/custom-gauge-panel.png '
  };
  var option1 = {
  	tooltip: {
  		trigger: 'item',
  		formatter: '{a} <br/>{b} : {c} ({d}%)'
  	},
  	legend: {
  		left: 'center'
  	},
  	toolbox: {
  		show: true,
  		feature: {
  			mark: { show: true },
  			dataView: { show: true,readOnly: false },
  			restore: { show: true }
  		}
  	},
  	series: [{
  		name: 'zspt 校园路灯',
  		type: 'pie',
  		radius: ['45%', '30%'],
  		center: ['46%', '51%'],
  		avoidLabelOverlap: false,
  		label: {
  			color: '#235894',
  			fontSize: 10,
  			minMargin: 5,
  			edgeDistance: 12
  		},
  		emphasis: {
  			label: {
  				show: true,
  				fontSize: '16',
  				fontWeight: 'bold',
  			},
  			itemStyle: {
  				shadowBlur: 10,
  				shadowOffsetX: 0,
  				shadowColor: 'rgba(0, 0, 0, 0.5)',
  				color: 'rgba(22,201,145,0.31)' // 高亮
  			}
  		},
  		labelLine: {
  			show: true,
  			length: 30,
  			length2: 15,
  			maxSurfaceAngle: 60
  		},
  		data: [{
  			value: eCount,
  			name: '东区',
  			label: {
  				formatter: [
  					'{title|{b}}{abg|}',
  					'  {weatherHead|Icon}{valueHead|个数}{rateHead|占比}',
  					'{hr|}',
  					'  {Sunny|}{value|{c}}{rate|{d}%}'
  				].join('\n'),
  				backgroundColor: '#eee',
  				borderColor: '#777',
  				borderWidth: 1,
  				borderRadius: 4,
  				rich: {
  					title: {
  						color: '#eee',
  						align: 'center'
  					},
  					abg: {
  						backgroundColor: '#333',
  						width: '100%',
  						align: 'right',
  						height: 25,
  						borderRadius: [4, 4, 0, 0]
  					},
  					Sunny: {
  						height: 30,
  						align: 'left',
  						backgroundColor: {
  							image: engineIcons.all
  						},
  					},
  					weatherHead: {
  						color: '#333',
  						height: 24,
  						align: 'left'
  					},
  					hr: {
  						borderColor: '#777',
  						width: '100%',
  						borderWidth: 0.5,
  						height: 0
  					},
  					value: {
  						width: 20,
  						padding: [0, 20, 0, 30],
  						align: 'left'
  					},
  					valueHead: {
  						color: '#333',
  						width: 20,
  						padding: [0, 20, 0, 30],
  						align: 'center'
  					},
  					rate: {
  						width: 40,
  						align: 'right',
  						padding: [0, 10, 0, 0]
  					},
  					rateHead: {
  						color: '#333',
  						width: 40,
  						align: 'center',
  						padding: [0, 10, 0, 0]
  					}
  				}
  			}
  		},
  		{
  			value: wCount,
  			name: '西区',
        label: {formatter: '{b} : {c} ({d}%)'}
  		},
  		{
  			value: nCount,
  			name: '北区',
        label: {formatter: '{b} : {c} ({d}%)'}
  		}]
  	}]
  };
  // 3. 把配置给实例对象
  myChart1.setOption(option1);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() { //自动适应大小
  	myChart1.resize();
  });
}

function roomLightInit() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('radar1'));
  myChart.setOption({
    legend: {
      data: ['东区', '西区','北区'],
      right: 'right'
    },
    radar: {
      indicator: [
        { name: 'Mon', max: 7500 },
        { name: 'Tue', max: 20000 },
        { name: 'Wed', max: 36000 },
        { name: 'Thu', max: 48000 },
        { name: 'Fri', max: 58000 },
        { name: 'Sat', max: 35000 },
        { name: 'Sun', max: 25000 }
      ]
    },
    series: [
      {
        name: 'contrast',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 48000, 18000,13000],
            name: '东区',
            areaStyle: {
              color: 'rgba(170, 0, 0, 0.6)'
            }
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000,15000],
            name: '西区',
            label: {
              show: true
            }
          },
          {
            value: [3000, 10000, 10000, 16000, 32000, 16000,10000],
            name: '北区'
          }
        ]
      }
    ]
  })
  window.addEventListener("resize", function() { //自动适应大小
  	myChart.resize();
  });
}

function computerInit() {
  let currentVoltageData = [];
  computerData.forEach(item => {
    let obj = [item.rmsVoltage,item.rmsCurrent];
    currentVoltageData.push(obj);
  })
  let myChart = echarts.init(document.getElementById('scatter1'));
  // 绘制图表
  myChart.setOption({
    grid: {
      x: '3%', //相当于距离左边效果:padding-left
      y: '20%',  //相当于距离上边效果:padding-top
      bottom: '15%',
      containLabel: true
    },
    title: {
      text: 'current / voltage'
    },
    xAxis: {
      type: 'value',
      scale: true,
      axisLabel: {
        formatter: '{value} mV'
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      scale: true,
      axisLabel: {
        formatter: '{value} mA'
      },
      splitLine: {
        show: false
      }
    },
    tooltip: {
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.seriesName +
            ' :<br/>' +
            params.value[0] +
            'mV ' +
            params.value[1] +
            'mA '
          );
        } else {
          return (
            params.seriesName +
            ' :<br/>' +
            params.name +
            ' : ' +
            params.value +
            'mA '
          );
        }
      },
      axisPointer: {
        show: true,
        type: 'cross',
        lineStyle: {
          type: 'dashed',
          width: 1
        }
      }
    },
    toolbox: {
      feature: {
        dataZoom: {},
        brush: {
          type: ['rect']
        }
      }
    },
    series: [
    {
      type: 'effectScatter',
      name: 'current1 / voltage1',
      symbolSize: 20,
      data: [
        [228538, 141],
        [225301, 3]
      ]
    },
    {
      type: 'scatter',
      name: 'current / voltage',
      data: currentVoltageData
    }],
  })
  window.addEventListener("resize", function() { //自动适应大小
  	myChart.resize();
  });
  
  // 1. 实例化对象
  var myChart1 = echarts.init(document.getElementById('gauge1'));
  // 2.指定配置
  var option1 = {
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: 18
        },
        axisLine: {
          lineStyle: {
            width: 18
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        axisLabel: {
          distance: 25,
          color: '#999',
          fontSize: 12
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 25,
          itemStyle: {
            borderWidth: 10
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 30,
          offsetCenter: [0, '70%']
        },
        data: [
          {
            value: currentVoltageData.length
          }
        ]
      }
    ]
  };
  // 3. 把配置给实例对象
  myChart1.setOption(option1);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() { //自动适应大小
  	myChart1.resize();
  });
}

function airConditionInit() {
  let axisData = [];
  let data = [];
  airConditionData.forEach(item => {
    axisData.push(item.id);
    data.push(item.loopCounter);
  })
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('guanxi1'));
  const links = data.map(function (item, i) {
    return {
      source: i,
      target: i + 1
    };
  });
  links.pop();
  myChart.setOption({
    tooltip: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: axisData
    },
    yAxis: {
      type: 'value',
      name: '采集频率次数'
    },
    series: [
      {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 40,
        label: {
          show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: data,
        links: links,
        lineStyle: {
          color: '#2f4554'
        }
      }
    ]
  })
  window.addEventListener("resize", function() { //自动适应大小
  	myChart.resize();
  });
}

function spemInit() {
  let currentData = [];
  let voltageData = [];
  let time = [];
  spemData.forEach(item => {
    currentData.push(item.rmsCurrent);
    voltageData.push(item.rmsVoltage);
    time.push(item.time);
  })
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('line1'));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: {
          readOnly: false
        },
        magicType: {
          type: ['line', 'bar']
        },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: time
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [{
        name: '电压',
        type: 'line',
        data: voltageData,
        markPoint: {
          data: [{
              type: 'max',
              name: 'Max'
            },
            {
              type: 'min',
              name: 'Min'
            }
          ]
        },
        markLine: {
          data: [{
            type: 'average',
            name: 'Avg'
          }]
        },
        smooth: true
      },
      {
        name: '电流',
        type: 'line',
        data: currentData,
        markPoint: {
          data: [{
            name: '周最低',
            value: -2,
            xAxis: 1,
            yAxis: -1.5
          }]
        },
        markLine: {
          data: [{
              type: 'average',
              name: 'Avg'
            },
            [{
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        },
        smooth: true
      }
    ]
  })
  window.addEventListener("resize", function() { //自动适应大小
    myChart.resize();
  });
}

function chinaInit() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('map2'));
  var airData = [{ name: '北京', value: 39.92 },{ name: '天津', value:39.13 },{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },
  	{name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南',value: 25.04 },{ name: '辽宁', value: 50 },
  	{ name: '黑龙江', value: 114},{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山东', value: 92 },
  	{ name: '新疆', value: 84 },{ name: '江苏', value: 67 },{ name: '浙江', value: 84 },{ name: '江西', value: 96 },
  	{ name: '湖北',value: 273 },{ name: '广西', value: 59 },{ name: '甘肃', value: 99 },{name: '山西', value: 39 },
  	{ name: '内蒙古', value: 58 },{ name: '陕西',value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },
  	{name: '贵州', value: 71 },{ name: '广东', value: 38 },{ name: '青海',value: 57 },{ name: '西藏', value: 24 },
  	{ name: '四川', value: 58 },{name: '宁夏', value: 52 },{ name: '海南', value: 54 },{ name: '台湾',value: 88 },
  	{ name: '香港', value: 66 },{ name: '澳门', value: 77 },{name: '南海诸岛', value: 55 }];
  var scatterData = [{
  	value: [113.280637, 23.125178] ,// 散点的坐标, 使用的是经纬度
  }];
  echarts.registerMap('chinaMap', chinaJson)
  // 2.指定配置
  var option = {
    geo: {
      type: 'map', // map是一个固定的值
      map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
      roam: true, //缩放
      label: {
        show: true
      },
      zoom: 1.5,
      center: [104.065735, 30.659462]
    },
    series: [{
      data: airData,
      geoIndex: 0,
      type: 'map'
    }, {
      data: scatterData,
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        scale: 10
      }
    }],
    visualMap: {
      min: 0, // 最小值
      max: 300, // 最大值
      inRange: {
        color: ['white', 'red'] // 颜色的范围
      },
      bottom: '20px',
      calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
    }
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() { //自动适应大小
  	myChart.resize();
  });
}

export {
  roadLightInit,
  roomLightInit,
  computerInit,
  airConditionInit,
  spemInit,
  chinaInit
}